<template>
    <el-card>
<!--        <template #header>-->
<!--            <div class="card-header">-->
<!--                <span>工作日历</span>-->
<!--            </div>-->
<!--        </template>-->
        <FullCalendar :options="calendarOptions"/>
    </el-card>
</template>

<script setup>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import esLocale from "@fullcalendar/core/locales/zh-cn";
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import dayjs from "dayjs";
import {getWorkCalendarApi} from "@/api/Dashboard/WorkCalendar.js";


const calendarOptions = ref({
    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
    initialDate: dayjs().format('YYYY-MM-DD'),
    // headerToolbar: false,
    navLinks: false,
    // selectable: true,
    // selectMirror: true,
    eventColor: 'red',
    // 语音化
    locale: esLocale,
    aspectRatio: 4,
    // height:'30',
    events: [
        // {
        //     start: "2024-10-07 00:00:00",
        //     end: "2024-10-07 23:59:59",
        //     content: '省院办案中心执勤'
        // },
        // {
        //     start: "2024-10-16",
        //     end: "2024-10-16",
        //     content: '保护检察人员'
        // }
    ],
    eventMouseEnter: async (info) => {
        console.log(info.event)
        tippy(info.el, {
            content: `<div>${info.event.extendedProps.content}</div>`,
            // content: info.event.extendedProps.name,
            // placement: "top-start",
            // arrow: false,
            // 鼠标放在提示中提示不消失
            // interactive: true,
            allowHTML: true,
        });
    },
    eventContent: (arg) => {
        console.log(arg.el)
        const time = dayjs(arg.event.startStr).format('HH:mm')
        return {
            html: `<div class="fc-daygrid-event-dot" style="border-color: red"></div>`
            // html: `<div class="fc-daygrid-event-dot" style="border-color: red;"></div><div class="fc-event-time">${time}</div>`
            // html: `<div class="fc-event-title fc-custom-content" title="${arg.event.title}">${arg.event.title}</div>`
        };
    }
})


// policeArea  警务区执勤
// sendPolice  用警申请
// policeApply 警务区执勤
const getCalendar = async () => {
    const res = await getWorkCalendarApi();
    // console.log([].concat(...Object.values(res.data).filter(v => Array.isArray(v))).map(v => {
    //     const time = dayjs(v.startdate).format('YYYY-MM-DD')
    //     return {
    //         start: `${v.startdate}`,
    //         end: `${time} 23:59:59`,
    //         content: v.name
    //     }
    // }))
    calendarOptions.value.events = [].concat(...Object.values(res.data).filter(v => Array.isArray(v))).map(v => {
        const time = dayjs(v.startdate).format('YYYY-MM-DD')
        return {
            start: `${v.startdate}`,
            end: `${time} 23:59:59`,
            content: v.name
        }
    });
}

onMounted(() => {
    getCalendar()
})
</script>

<style scoped lang="scss">
:deep(.fc-header-toolbar) {
    font-size: 0.4375rem;
}

:deep(.fc .fc-view-harness) {
    height: 21rem !important;
}

:deep(.fc .fc-daygrid-day.fc-day-today) {
    --fc-today-bg-color: var(--el-color-primary) !important;
    //    --el-color-primary-light-9

    .fc-event-time {
        color: var(--el-color-info-light-9);
    }
}

:deep(.fc .fc-day-today .fc-daygrid-day-number) {
    color: var(--el-color-primary-light-9);
}

:deep(.fc-theme-standard td, .fc-theme-standard th){
    height: 40px !important;
}
:deep(.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events){
    min-height: 0 !important;
}
</style>